<template>
    <div class="bg">
        <div class="top_nav ">
     
      <van-icon name="arrow-left" color="#fff" size="20" @click="returnTap" />
      <div class="top_nav_title">
      <span class="nav_title">2020年8月10日 上午9:20</span>
      <span class="progress">1/2</span>
      </div>
      <van-icon name="ellipsis" color="#fff" size="20" @click="show = true" />
    </div>

    <van-swipe class="my-swipe"   :show-indicators="false">
  <van-swipe-item class="my-swipe_item">
      <img src="../../../static/images/me/headimg.png" alt=""></van-swipe-item>
  <van-swipe-item class="my-swipe_item"><img src="../../../static/images/me/headimg.png" alt=""></van-swipe-item>
  
</van-swipe>
<div class="bottom_list">
    <div class="list_text">你需要快乐不必正常</div>
    <div class="bottom_tap">
        <div class="discent">
            <img src="../../../static/images/me/live_icon.png" alt="" class="icon">
            <span class="mag_10">赞</span>
            <img src="../../../static/images/me/chat_icon.png" alt="" class="icon">
            <span class="mag_10">评论</span>
            
        </div>
        <div class="discent">
            <img src="../../../static/images/me/live_icon.png" alt="" class="icon">
            <span class="mag_10">7</span>
            <img src="../../../static/images/me/chat_icon.png" alt="" class="icon">
            <span class="mag_10">3</span>
        </div>
    </div>
</div>
<div class="success_icon" v-if="showSuccess">
    <img src="../../../static/images/me/success.png" alt="">
    <span>已设为私密</span>
</div>
<van-action-sheet v-model="show" :actions="actions" @select="onSelect" cancel-text="取消" />
    </div>
</template>
<script>
export default {
    data(){
        return {
            showSuccess:false,
         show:false,
         actions:[{name:'设为私密照片',id:1},
         {name:'发送给朋友',id:2},
         {name:'保存图片',id:3},
         {name:'删除',id:4}]
        
        }
    },
    methods:{
    returnTap(){
this.$router.go(-1)
    },
    onSelect(item){
   console.log(item )
   let that = this
   if(item.id == 1){
       this.showSuccess = true
       setTimeout(function(){
that.showSuccess = false
       },2000)
   }
   this.show = false
    }
    },
}
</script>
<style  scoped>
.bg{
    background: #000;
    height: 100vh;
    width: 100vw;
}
.top_nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  padding: 0 25px;
  /* background: #eee; */
  margin-bottom: 20px;
}
.top_nav_title{
    color: #fff;
    display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; 
}
.progress{
    font-size: 10px;
}
.my-swipe{
    height: 60%;
}
.my-swipe_item{
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.my-swipe_item img{
    width: 90%;
}
.bottom_list{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    color: #fff;
}
.list_text{
    padding: 20px ;
    
}
.bottom_tap{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    padding: 0 10px;
    background: #151515;
    border-top: 1px solid #797979;
}
.discent{
     display: flex;
    justify-content: center;
    align-items: center;
}
.mag_10{
    margin: 0 10px 0 2px ;
}
.icon{
    width: 20px;
    height: 20px;
}
.success_icon{
    background: #F2F2F2;
     width: 110px; 
     height: 110px;   
    position: fixed; 
    left: 0;
     top: 0; 
     right: 0; 
     bottom: 0;   
    margin: auto;    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 10px;
}
.success_icon img{
    width: 70px;
    height: 70px;
    margin-bottom: 5px ;
}
</style>
